<template>
  <div class="interviewer-profile">
    <el-card>
      <div style="text-align: center">
        <el-avatar :src="require('@/assets/logo.png')" :size="80"></el-avatar>
      </div>
      <div
        style="
          background-color: #f6f6f6;
          padding: 20px 20px;
          margin-top: 20px;
          border-radius: 4px;
        "
      >
        <el-form v-model="user">
          <el-form-item label="用户名">
            <el-tag>{{ user.name }}</el-tag>
          </el-form-item>
          <el-form-item label="用户类型">
            <el-tag>{{ user.status }}</el-tag>
          </el-form-item>
          <el-button type="primary" @click="onSelectProblemToStartInterview"
            >选择题目开始面试</el-button
          >
          <el-button type="danger" @click="onLogout">退出账号</el-button>
        </el-form>
      </div>
    </el-card>

    <el-dialog
      title="请选择面试题目"
      :visible.sync="dialogSelectVisiable"
      :before-close="beforeDialogSelectClose"
      append-to-body
    >
      <interviewer-public-problem-set
        ref="publicProblem"
        @onPublicProblemSelectionChange="onPublicProblemSelectionChange"
      ></interviewer-public-problem-set>
      <interviewer-self-problem-set
        ref="selfProblem"
        @onSelfProblemSelectionChange="onSelfProblemSelectionChange"
      ></interviewer-self-problem-set>
      <div slot="footer">
        <el-button @click="onProblemSelectCancel">取消</el-button>
        <el-button type="primary" @click="onProblemSelectConfirm"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="请输入面试主题"
      :visible.sync="dialogThemeVisiable"
      :before-close="beforeDialogThemeClose"
      append-to-body
    >
      <el-form
        ref="interviewForm"
        :model="interviewInfo"
        :rules="interviewRules"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item label="面试主题" prop="theme">
          <el-input
            v-model="interviewInfo.theme"
            @keydown.enter.native="onThemeInputConfirm"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onThemeInputCancel">取消</el-button>
        <el-button type="primary" @click="onThemeInputConfirm"
          >开始面试</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import InterviewerPublicProblemSet from "@/components/Interviewer/InterviewerPublicProblemSet.vue";
import InterviewerSelfProblemSet from "@/components/Interviewer/InterviewerSelfProblemSet.vue";
export default {
  name: "InterviewerProfile",
  components: {
    InterviewerPublicProblemSet,
    InterviewerSelfProblemSet,
  },
  mounted() {
    this.getUserData();
  },
  methods: {
    setInterviewInfoDefault() {
      this.interviewInfo = {
        problemData: [],
        theme: "",
      };
    },
    getUserData() {
      axios
        .get("/api/user")
        .then((response) => {
          console.log(response);
          if (response.data.status == 1) {
            this.user.name = response.data.result.username;
            this.user.status =
              response.data.result.status === 1
                ? "面试官"
                : response.data.result.status === 0
                ? "普通用户"
                : "未知";
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onLogout() {
      //登出删除用户session
      axios
        .get("/api/reqLogout/")
        .then((response) => {
          console.log(response);
          if (response.data.status == 1) {
            this.$message.warning("退出账号成功，3s后跳转到登陆界面");
            window.sessionStorage.clear();
            setTimeout(() => {
              this.$router.replace("/login");
            }, 3000);
          } else {
            this.$message.warning("用户未登录，3s后跳转到登陆界面");
            window.sessionStorage.clear();
            setTimeout(() => {
              this.$router.replace("/login");
            }, 3000);
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("退出账号失败");
        });
    },
    clearProblemSelection() {
      // console.log("clearProblemSelection");
      this.publicProblemSelection = [];
      this.privateProblemSelection = [];
      this.$refs["publicProblem"].clearSelection();
      this.$refs["selfProblem"].clearSelection();
    },
    beforeDialogSelectClose(done) {
      this.dialogSelectVisiable = false;
      this.clearProblemSelection();
      this.setInterviewInfoDefault();
      done();
    },
    beforeDialogThemeClose(done) {
      this.dialogThemeVisiable = false;
      this.clearProblemSelection();
      this.setInterviewInfoDefault();
      done();
    },
    onPublicProblemSelectionChange(selection) {
      this.publicProblemSelection = selection;
      // console.log("this.publicProblemSelection", this.publicProblemSelection);
    },
    onSelfProblemSelectionChange(selection) {
      this.selfProblemSelection = selection;
      // console.log("this.selfProblemSelection", this.selfProblemSelection);
    },
    onSelectProblemToStartInterview() {
      this.onProblemSelect();
    },
    onProblemSelect() {
      this.dialogSelectVisiable = true;
    },
    onProblemSelectCancel() {
      this.dialogSelectVisiable = false;
      this.clearProblemSelection();
      this.setInterviewInfoDefault();
    },
    onProblemSelectConfirm() {
      this.interviewInfo.problemData = this.problemSelection.slice();
      if (this.interviewInfo.problemData.length === 0) {
        this.$message.warning("未选择任何题目");
      } else {
        this.dialogSelectVisiable = false;
        this.clearProblemSelection();
        this.onThemeInput();
      }
    },
    onThemeInput() {
      this.dialogThemeVisiable = true;
    },
    onThemeInputCancel() {
      this.dialogThemeVisiable = false;
      this.clearProblemSelection();
      this.setInterviewInfoDefault();
    },
    onThemeInputConfirm() {
      this.$refs["interviewForm"].validate((valid) => {
        if (valid) {
          this.dialogThemeVisiable = false;
          this.onStartInterview();
        } else {
          this.$message.warning("未输入面试主题");
        }
      });
    },
    onStartInterview() {
      let interviewTheme = this.interviewInfo.theme;
      let interviewProblemDataId = this.interviewInfo.problemData.map(
        (problem) => {
          return problem._id;
        }
      );
      axios
        .post("/api/room/create", {
          room_name: interviewTheme,
          problem_select: interviewProblemDataId,
        })
        .then((response) => {
          console.log(response);
          this.setInterviewInfoDefault();
          this.$message.success("选择题目开始面试成功");
          let roomId = response.data.result.room._id;
          this.$router.push("/interview/" + roomId);
        })
        .catch((error) => {
          console.log(error);
          this.setInterviewInfoDefault();
          this.$message.error("选择题目开始面试失败");
        });
    },
  },
  data() {
    return {
      user: {
        name: "test",
        status: 0,
      },

      dialogSelectVisiable: false,
      dialogThemeVisiable: false,

      publicProblemSelection: [],
      selfProblemSelection: [],

      interviewInfo: {
        problemData: [],
        theme: "",
      },
      interviewRules: {
        theme: [
          {
            required: true,
            message: "请输入面试主题",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    problemSelection() {
      return this.publicProblemSelection.concat(this.selfProblemSelection);
    },
  },
};
</script>

<style></style>
